<!-- 录入新题 -->
<template>
  <div class="new-question-container">
    <div class="form-action">
      <el-form ref="newQuestionForm" :inline="true" label-position="right" label-width="120px" class="new-question-form">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('paperQuestionLangList.questionType')">
              <el-select v-model="questionTypeValue" :placeholder="$t('paperQuestionLangList.tagsTooltip')" @change="questionTypeChange">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <singleCom v-if="questionTypeValue === 'single'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType" @saveCallback="saveCallbackFunction"/>
        <multipleCom v-if="questionTypeValue === 'multiple'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <judgeCom v-if="questionTypeValue === 'judge'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <combinationCom v-if="questionTypeValue === 'combination'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <blankCom v-if="questionTypeValue === 'blank'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <sortingCom v-if="questionTypeValue === 'sorting'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <clozeCom v-if="questionTypeValue === 'cloze'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <readingCom v-if="questionTypeValue === 'reading'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType"  @saveCallback="saveCallbackFunction"/>
        <listeningCom v-if="questionTypeValue === 'listening'" ref="questionRef" :category-props="questionTypeValue" :parent-paper-id="paperId" :new-edit-type="newType" @saveCallback="saveCallbackFunction"/>
      </el-form>
    </div>
  </div>
</template>

<script>
import { cates } from '@/utils/dic'
import singleCom from './question/single'
import multipleCom from './question/multiple'
import judgeCom from './question/judge'
import combinationCom from './question/combination'
import blankCom from './question/blank'
import sortingCom from './question/sorting'
import clozeCom from './question/cloze'
import readingCom from './question/reading'
import listeningCom from './question/listening'
import fileAudio from '@/assets/svg/file-audio.svg'
import fileAudioHover from '@/assets/svg/file-audio_hover.svg'
export default {
  name: 'PaperNewQuestion',
  components: {
    singleCom,
    multipleCom,
    judgeCom,
    combinationCom,
    blankCom,
    sortingCom,
    clozeCom,
    readingCom,
    listeningCom
  },
  props: {
    paperId: String,
    newType: String
  },
  data() {
    return {
      questionTypeValue: '',
      typeOptions: [],
      customToolbar: ['bold', 'italic', 'underline', 'image'],
      fileAudio,
      fileAudioHover
    }
  },
  created() {
    this.typeOptions = cates
    this.questionTypeValue = cates[0].value
  },
  methods: {
    // 保存回调
    saveCallbackFunction() {
      this.$emit('callbackFuntion')
    },
    // 题型类型选择事件
    questionTypeChange(val) {
      this.questionTypeValue = val
    },
    initPage() {
      this.$nextTick(() => {
        this.$refs.questionRef.initData()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .new-question-form {
    min-height: 720px;
    max-height: 720px;
    overflow-y: auto;
    position: relative;
    /deep/ .form-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    /deep/ .question-tip {
      width: 640px;
      color: #666666;
    }
    /deep/ .refer-answer {
      font-weight: bold;
      font-size: 16px;
      color: #409eff;
    }
  }
  /deep/ .quillWrapper {
    width: 640px;
    position: relative;
  }
</style>
